import React,{useState,useEffect,useCallback} from 'react';


function useWinSize() {

    const [size,setSize] = useState({
        winWidth:document.documentElement.clientWidth,
        winHeight:document.documentElement.clientWidth
    })

    const onResize = useCallback( () => {
        setSize({
            winWidth:document.documentElement.clientWidth,
            winHeight:document.documentElement.clientHeight
        })
    },[]);

    useEffect(() => {

        window.addEventListener('resize',onResize); // 渲染或更新后添加事件

        return () => window.removeEventListener.bind('resize',onResize); // 卸载后移除事件
    })

    return size;

}

function Example() {


    const size = useWinSize();

    return (
        <div>
            <h1>页面规格：{size.winWidth} X {size.winHeight}</h1>
        </div>
    )
}

export default Example;